<template>
  <transition name="translate">
    <div class="wrapper">
      <common-back :content="title"></common-back>
      <common-scroll class="scroll">
        <div class="scroll-content">
          <ul class="ticket-list">
            <li class="ticket-item"
                border-radius
                v-for="item of actions"
                :key="item.coupon_id">
              <div class="title">{{item.coupon_name}}</div>
              <div class="info">
                <div class="price">￥<span>{{item.prefer_amount}}</span></div>
                <!-- <div class="use"
                     @click="handleDetail">立即使用</div> -->
              </div>
            </li>
          </ul>
        </div>
      </common-scroll>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonScroll from 'common/scroll/scroll'
export default {
  name: '',
  components: {
    CommonBack,
    CommonScroll
  },
  data () {
    return {
      title: '代品券',
      actions: []
    }
  },
  created () {
    this.getDiscount()
  },
  methods: {
    handleDetail () {
      this.$router.push({
        path: '/me/ticket/detail'
      })
    },
    getDiscount () {
      this.$api.common.discountList()
        .then(this.getDiscountSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getDiscountSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.actions = data.coupon
        console.log(data.coupon)
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  background-color $space
  z-index 10

  .scroll
    top 90px

    .ticket-list
      width 100%
      padding-top 20px
      padding-right 35px
      padding-left 35px
      box-sizing border-box

      .ticket-item
        width 681px
        border-radius 16px
        bgckImg('~@/assets/images/ticket.png', center, center)
        background-size conver
        padding-bottom 60px
        box-sizing border-box
        margin-bottom 20px

        [border-radius]::before
          border-radius 16px

        .title
          width 100%
          font-size $address
          padding-left 30px
          padding-right 30px
          box-sizing border-box
          font-weight 400
          color $footer_bgc
          line-height 78px
          margin-bottom 50px
          border-bottom 8px dotted #F2F6F5
          position relative

          &:before, &:after
            content ''
            position absolute
            bottom -13px
            left -13px
            width 26px
            height 26px
            background-color #F2F6F5
            border-radius 50%

          &:after
            right -13px
            left auto

        .info
          display flex
          justify-content space-between
          align-items flex-end
          padding-left 30px
          padding-right 30px
          box-sizing border-box

          .price
            font-size $address
            font-weight 500
            color $footer_bgc
            display flex
            align-items flex-end

            span
              font-size 86px
              margin-right 10px
              line-height 86px

          .use
            font-size $address
            color $paidState
            height 100%

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
